<template>
  <a-card
    :body-style="{ padding: '28px 5%' }"
    :bordered="false"
  >
    <!-- 1 -->
    <a-card
      :bordered="true"
      style="margin-bottom: 3%"
    >
      <span
        class="card-title"
        slot="title"
      >调度信息</span>

      <a-row
        style="margin: 22px 0;"
        v-for="(item, key) in this.column.section1"
        :key="key"
        :gutter="24"
      >
        <a-col
          :span="3"
          style="text-align: right;"
        >
          <span>{{item[0].label}}：</span>
        </a-col>
        <a-col :span="7">
          <span style="padding-left: 7%;">{{appInfo[item[0].key] || '暂无'}}</span>
        </a-col>

        <a-col
          :span="3"
          style="text-align: right;"
        >
          <span>{{item[1].label}}：</span>
        </a-col>
        <a-col :span="7">
          <span style="padding-left: 7%;">{{appInfo[item[1].key] || '暂无'}}</span>
        </a-col>
      </a-row>
    </a-card>

    <!-- 2 & 3 -->
    <a-row
      :gutter="24"
      style="margin-bottom: 3%"
    >
      <a-col :span="12">
        <a-card :bordered="true">
          <span
            class="card-title"
            slot="title"
          >调度效果预测</span>
          <a-row
            style="margin: 22px 0;"
            v-for="(item, index) in this.column.section2"
            :key="index"
            :gutter="14"
          >
            <a-col
              :span="12"
              style="text-align: right;"
            >
              <span>{{item.label}}：</span>
            </a-col>
            <a-col :span="12">
              <span style="padding-left: 18%;">{{resultDetail[item.key] ? parseFloat(resultDetail[item.key]).toFixed(2) + item.unit : '暂无'}}</span>
            </a-col>
          </a-row>
        </a-card>
      </a-col>

      <a-col :span="12">
        <a-card
          :bordered="true"
          style="margin-bottom: 3%"
        >
          <span
            class="card-title"
            slot="title"
          >调度实际结果</span>
          <a-row
            style="margin: 22px 0;"
            v-for="(item, index) in this.column.section3"
            :key="index"
            :gutter="14"
          >
            <a-col
              :span="12"
              style="text-align: right;"
            >
              <span>{{item.label}}：</span>
            </a-col>
            <a-col :span="12">
              <span style="padding-left: 7%;">{{resultDetail[item.key] ? parseFloat(resultDetail[item.key]).toFixed(2) + item.unit : '暂无'}}</span>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- 4 -->
    <a-card
      :bordered="true"
      style="margin-bottom: 2%"
    >
      <span
        class="card-title"
        slot="title"
      >调度结果偏差分析</span>

      <a-row
        style="margin: 22px 0;"
        v-for="(item, index) in this.column.section4"
        :key="index"
        :gutter="24"
      >
        <a-col
          :span="10"
          style="text-align: right;"
        >
          <span>{{item.label}}：</span>
        </a-col>
        <a-col :span="14">
          <span style="padding-left: 7%;">{{resultDetail[item.key] ? differenceFormatter(resultDetail[item.key]) + item.unit : '暂无'}}</span>
        </a-col>
      </a-row>
    </a-card>

    <a-button
      type="primary"
      @click="() => $emit('on-close')"
    >
      关闭
    </a-button>
  </a-card>
</template>

<script>
  import { gPostAction } from "@/api/manage"

  export default {
    name: 'ForecastResult',
    props: {
      appInfo: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        form: this.$form.createForm(this),
        column: {
          section1: {
            row1: [{
              key: 'appName',
              label: '应用名称'
            },
            {
              key: 'cloudResourceTypeName',
              label: '调度类型'
            }],
            row2: [{
              key: 'srcDatacenterName',
              label: '原数据中心'
            },
            {
              key: 'dstDatacenterName',
              label: '目标数据中心'
            }],
          },
          section2: [
          {
            key: 'temperatureImagine',
            label: '数据中心温度预测值',
            unit: '℃',
          },
          {
            key: 'distributionBoxVoltageImagine',
            label: '数据中心配电子网负荷预测值',
            unit: 'KW',
          },
          {
            key: 'datacenterEnergyImagine',
            label: '数据中心能耗预测值',
            unit: 'KWH',
          },
          {
            key: 'businessRespondImagine',
            label: '应用响应时间预测值',
            unit: 'S',
          }, ],
          section3: [
          {
            key: 'temperatureResult',
            label: '数据中心温度实际值',
            unit: '℃',
          },
          {
            key: 'distributionBoxVoltageResult',
            label: '数据中心配电子网负荷实际值',
            unit: 'KW',
          },
          {
            key: 'datacenterEnergyResult',
            label: '数据中心能耗实际值',
            unit: 'KWH',
          },
          {
            key: 'businessRespondResult',
            label: '应用响应时间实际值',
            unit: 'S',
          }, ],
          section4: [
          {
            key: 'temperatureResultDifference',
            label: '数据中心温度偏差分析',
            unit: '',
          },
          {
            key: 'distributionBoxVoltageResultDifference',
            label: '数据中心配电子网负荷偏差分析',
            unit: '',
          },
          {
            key: 'datacenterEnergyResultDifference',
            label: '数据中心能耗偏差分析',
            unit: '',
          },
          {
            key: 'businessRespondResultDifference',
            label: '应用响应时间偏差分析',
            unit: '',
          }, ],
        },
        resultDetail: {},
      }
    },
    mounted() {
      if (this.appInfo.id) {
        this.loadForecastResultInfo()
      }
    },
    methods: {
      loadForecastResultInfo() {
        const postData = {
          appId: this.appInfo.appId,
          sourceNodeId: this.appInfo.sourceNodeId,
          destNodeId: this.appInfo.dstNodeId,
          schedulerModel: this.appInfo.schedulerModel,
        }

        gPostAction('/scheduler/scheduler_result_analysis', postData).then((res) => {
          if (res.success) {
            this.resultDetail = res.data
          }
        })
      },
      differenceFormatter(value) {
        if (value <= 0.6) {
          return '优秀'
        } else if (value > 0.6 && value < 0.8) {
          return '良好'
        } else if (value >= 0.8 && value <= 1) {
          return '合格'
        }
        return '不合格'
      },
    },
  }
</script>
<style scoped>
  .card-title {
    padding-left: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    border-left: 6px solid #0784D3;
    color: #0784D3;
  }
</style>